/* App */
$tile: #5500ff;
$app_width: 200px;
$app_height: 124px;
$app_background_opacity: 0.6;

/* Colors */
$app_highlight: #392a84;
$theme_bg_light: #FFF;
$theme_bg_dark: #000;

$text_light: #555;
$text_dark: #EFEFEF;

$icon_dark: #3aa0d7;
$icon_hover_dark: rgba(179, 112, 223, 0.9);
// $icon_dark: #456072;
$icon_light: $app_highlight;
$icon_hover_light: rgba(150, 32, 157, 0.9);
$icon_red: rgba(255, 87, 51, 0.95);
$icon_shadow: rgba(10, 10, 10, .7);

$border_dragging: #569aff;
$border_dragging: $app_highlight;

$default_reticle_fill: #ccc;

$help_text: #666;
$help_text_bg: #EEE;
$help_text_border: #DDD;

$chooser_border: #111;
$chooser_highlight: #c7c7c7;
$chooser_highlight_hover: #2466d8;

$scrollbar_bg: #555;
$scrollbar_shadow: rgba(0, 0, 0, .3);

:root {
	// App theme
	--app-bg-color-initial: #{rgba($theme_bg_light, $app_background_opacity)};
	--app-bg-color-initial: #{rgba($theme_bg_light, .6)};
	--app-bg-color: unset;

	--app-highlight-color-initial: #{$icon_light};
	--app-highlight-color: unset;
	--app-icon-hover-color: #{$icon_hover_light};

	--app-text-color: #{$text_light};
	--app-bg-opacity: #{$app_background_opacity};
	--app-chooser-bg-color: #{rgba($theme_bg_light, 1)};


	// ANY LIGHT/DARK MODE SETTINGS ^v
	@media (prefers-color-scheme: dark) {
			--app-bg-color-initial: #{rgba($theme_bg_dark, .6)};
			--app-highlight-color-initial: #{$icon_dark};
			--app-icon-hover-color: #{$icon_hover_dark};
	}


	// Settings
	--crosshair-scale: 1;
	--crosshair-width: 100px;
	--crosshair-height: 100px;
	--crosshair-opacity: 1;
	--reticle-fill-color: #{$default_reticle_fill};
	--reticle-scale: 100;
	--tilt-angle: 0deg;
	--svg-fill-color: inherit;
	--svg-stroke-color: inherit;
	--svg-stroke-width: inherit;
}

* {
    box-sizing: border-box;
    user-select: none;
}

html,
body {
	width: 100%;
	height: 100%;
    padding: 0;
    margin: 0;
    background: transparent;
    overflow: hidden;
}

/* Use OS default fonts */
body {

    color: var(--app-text-color, $text_dark);
    font-size: 11px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
    text-rendering: optimizeLegibility;
    font-feature-settings: 'liga', 'clig', 'kern';

}

#crosshair,
#chooser-container {
	pointer-events: auto; // set pointer
}

::selection {
    background: transparent;
    color: inherit;
}

/* Application Style */

.container {
    overflow: hidden;
    position: relative;
    background: none;
    border-radius: 5px;
    width: 100%;
    height: 100%;
    cursor: none;
}


// Blue "Hover" border
.container,
#chooser-container {
    // user-select: none;
    // While dropping file
    &.dropping {

        &.main-window * {
            pointer-events: none;
        }
        &:before {
            content: '';
            position: absolute;
            top: 5px;
            right: 5px;
            bottom: 5px;
            left: 5px;
            border: 4px dashed $border_dragging;
            pointer-events: none;
            z-index: 30;
        }
    }
}

.background {
    transition: background 1s ease;
    border-radius: 5px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -10;
    display: none;
    background: var(--app-bg-color, var(--app-bg-color-initial));
	border: 1px solid var(--app-highlight-color, var(--app-highlight-color-initial));
}

#titlebar {
    position: absolute;
    top: 5px;
    right: 0;
    left: 0;
    z-index: 10;
    height: 20px;
}

/* Icon Styles */
.feather {
	// stroke:whitesmoke;
    width: 20px;
    height: 20px;
	transition: all .15s ease-in-out;
	stroke: var(--app-highlight-color, var(--app-highlight-color-initial));
    &:hover {
        stroke: var(--app-icon-hover-color);
    }
	// transform: scale( var(--crosshair-scale, 1) )
}

// Child window background
.shadow {
	.background {
		background: var(--app-bg-color);
	}
	.feather {
		stroke: $icon_shadow;
	}
}

.button {
    -webkit-app-region: no-drag;
    cursor: pointer;
    border: none;
    outline: none;
    background-color: transparent;
    pointer-events: auto;
    user-select: none;
    display: none;
    position: absolute;
    z-index: 20;
}

.close-button {
    display: block; // display in chooser
    top: 0;
    right: 0;
	padding: 4px 4px 2px 4px;
}

.main-window .close-button {
    display: none;
    right: auto;
    left: 0;
}

.settings-button {
    bottom: 0;
    right: 0;
	padding: 4px 4px 2px 4px;
}

.center-button {
    bottom: 0;
    left: 0;
	padding: 4px 4px 2px 4px;
    // filter: drop-shadow(0px 0px 3px rgba(0,0,0,0.5));
}

.info-button {
    top: 0;
    right: 0;
	padding: 1px 1px 2px 4px;
	.feather {
		width: 18px;
		height: 18px;
	}

	&.move,
	&.resize {
		cursor: move;
		&:active {
			cursor: crosshair;
		}
		.feather {
			stroke: var(--app-highlight-color, var(--app-highlight-color-initial));
		}
	}
    .info-icon {
        .feather {
    	    stroke: $icon_red;
    	    fill: white;
        }
    }
}

#crosshair {
    // Default width
    width: var(--crosshair-width);
    height: var(--crosshair-height);
	opacity: var(--crosshair-opacity);
    display: flex;
    position: relative;
	transform: rotate( var(--tilt-angle) );
	transition: transform .1s ease-in-out;

	svg {
		fill: var(--svg-fill-color);
		stroke: var(--svg-stroke-color);
		stroke-width: var(--svg-stroke-width);
	}

	.reticle {
		transform: scale( calc( var(--reticle-scale) / 100 ));
		position: absolute;
		z-index: 10;
		svg {
			display: none;
			width: 100%;
			height: 100%;
			* {
				fill: var(--reticle-fill-color);
			}
		}
		// Selectively show/hide
		&.dot {
			#dot {
				display: block;
			}
		}
		&.cross {
			#cross {
				display: block;
			}
		}
	}

}

.crosshair-wrapper {
    // This controls what is draggable
	transform: scale(var(--crosshair-scale, 1));
	// transform: scale(calc( calc(100%/125) * 100));
    position: relative;
    height: 100%;
    width: 100%;
	min-height: 100px;
	min-width: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
	padding: 10px auto;
}

#crosshairImg {
	width: 100%;
    height: auto;
    user-select: none;
}

// If draggable then app is unlocked
.draggable {

    .container {
        cursor: inherit;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
        // dont drag app if were dropping a file
        &:not(.dropping) {
			#titlebar,
        	.info-button.move, // icon-move
            #crosshair,
            #crosshair * {
                // This is the magic to make things draggable
                -webkit-app-region: drag;
                cursor: move;
                &:active {
                    cursor: crosshair;
                }
            }
        }
    }

    .background {
        display: block;
    }

    // Show buttons (except close) when unlocked
    .button {
        display: block;
    }

	// Show close button on linux/windows
	&.mac .main-window .close-button {
		display: none;
	}

    &.mac {
		// Whole window draggable on mac, Windows bugs out when dragging
		.container:not(.dropping) .crosshair-wrapper {
			// This is the magic to make things draggable
			-webkit-app-region: drag;
			cursor: move;
			&:active {
				cursor: crosshair;
			}
		}

	}

}


/*
 * Settings
 */

label {
    display: block;
    margin-top: 10px;
    margin-bottom: 4px;
    &:first-of-type {
        margin-top: 0;
    }
}

/* Crosshair chooser */

#chooser-container {
    height: 100vh;
    width: 100vw;
    padding: 4px;
    background: var(--app-chooser-bg-color);
    border: 3px solid $chooser_border;
}


#chooser-container {
    padding-top: 25px;
    border-radius: 5px;
}

#chooser-wrapper {
    height: 100%;
}

#crosshair-chooser {
    height: 100%;
    width: 100%;
    overflow-y: auto;
    &::-webkit-scrollbar-track {
        box-shadow: none;
        border: none;
        background-color: transparent;
    }
    &::-webkit-scrollbar {
        margin-right: 1px;
        width: 12px;
        background-color: transparent;
    }
    &::-webkit-scrollbar-thumb {
        opacity: 0.9;
        border-radius: 10px;
        box-shadow: inset 0 0 6px $scrollbar-shadow;
        background-color: $scrollbar-bg;
    }
    p {
        display: inline-block;
    }
    .crosshair-option {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: start;
    }
    .group-label {
        display: block;
        padding: 0 0.5em;
        font-size: 20px;
        margin-bottom: 0;
        &:first-of-type {
            margin-top: 0;
        }
    }

    // Collection wrapper
    &>div {
        width: 100%;
        padding: 0 0.5em 0;
        margin-left: -0.25em;
        margin-right: -0.25em;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: start;
        p {
            max-width: 88px;
        }
    }
    img {
        cursor: pointer;
        box-sizing: content-box;
        margin: 0.5em;
        padding: 0.5em;
        height: 64px;
        border: 1px dashed $chooser_highlight;
        border-radius: 3px;
        transition: border-color .2s ease-in;
		background-color: rgba(#FFF, .5);
        &.current,
        &:hover {
            border-color: $chooser_highlight_hover;
        }
        &.current {
        	border-style: solid;
        	border-width: 3px;
        }
    }
}

.d-none {
    display: none;
}

.d-inline-block {
    display: inline-block;
}

.d-flex {
    display: flex;
    justify-content: space-between;
}

.hidden {
	display: none;
	pointer-events: none;
}
